﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>节点移动操作面板</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    

</head>
<body>
    <h1>节点移动操作面板</h1>      

    <input type="button" value="移动节点" onclick="onMoveNode()"/>
    
    <ul id="tree1" class="mini-tree" url="../data/listTree.txt" style="width:200px;padding:5px;" 
        showTreeIcon="true" textField="text" idField="id" parentField="pid" resultAsTree="false"                  
        >
    </ul>

    <div id="moveWindow" title="选择目标节点" class="mini-window" style="width:300px;height:250px;"
        showModal="true" showFooter="true" allowResize="true"
        >
        <ul id="moveTree" class="mini-tree" style="width:100%;100%;" 
            showTreeIcon="true" textField="text" idField="id" 
            
            >        
        </ul>
        <div property="footer" style="padding:5px;">
            <table style="width:100%">
                <tr>
                    <td>
                        插入方式：
                        <select id="moveAction" >
                            <option value="before" >节点前</option>
                            <option value="after">节点后</option>
                            <option value="add" selected>节点内</option>
                        </select>
                    </td>
                    <td style="width:120px;text-align:right;">
                        <input type="button" value="确定" onclick="okWindow()"/>
                        <input type="button" value="取消" onclick="hideWindow()"/>
                    </td>
                </tr>            
            </table>
        </div>
    </div>
        
    <script type="text/javascript">
        mini.parse();

        var tree = mini.get("tree1");

        var moveWindow = mini.get("moveWindow");
        var moveTree = mini.get("moveTree");

        function fillMoveTree(treeData) {
            treeData = mini.clone(treeData);
            moveTree.loadData(treeData);
            moveTree.collapseAll();
            document.getElementById("moveAction").value = "add";
        }
        function okWindow() {            
            var moveNode = tree.getSelectedNode();
            var targetNode = moveTree.getSelectedNode();
            var moveAction = document.getElementById("moveAction").value;
            
            if (moveNode && targetNode && moveAction) {
                targetNode = tree.getNode(targetNode.id);

                if (tree.isAncestor(moveNode, targetNode)) {
                    alert("移动节点不能是目标节点的父节点");
                    return;
                }
                
                tree.moveNode(moveNode, targetNode, moveAction);

                moveWindow.hide();
            } else {
                alert("请选择一个目标节点");
            }

        }
        function hideWindow() {
            var moveWindow = mini.get("moveWindow");
            moveWindow.hide();
        }

        function onMoveNode(e) {
            
            var node = tree.getSelectedNode();

            if (node) {
                moveWindow.show();
                fillMoveTree(tree.getData());
            } else {
                alert("请先选择节点");
            }
        }
    </script>

    <div class="description">
        <h3>Description</h3>
        <p>            
        </p>
    </div>
</body>
</html>